{extend name="common/common" /} {block name="style"}
<style type="text/css">
	.container-fluid .btn {
		float: right;
		margin-left: 10px;
	}
	.btn.btn-sm {
		margin: 0;
	} 
	.layui-input.layui-unselect {
		width: 182px;
	}
	.layui-input-block {
		margin-left: 80px;
	}
	.layui-input.layui-unselect{
		width: 85px;
	}
	#cusTable tr{
		cursor: pointer;
	}
	.fixed-table-container thead th .sortable{
		padding-right: 0;
	}
	.layui-layer-btn.layui-layer-btn- a.layui-layer-btnAgree{
		color: #fff;
		background-color: #1ab394;
		border-color:#1ab394;
	}
	.layui-layer-btn.layui-layer-btn- a.layui-layer-btnDisagree{
		color: #fff;
		background-color: #ed5565;
		border-color:#ed5565;
	}
</style>
{/block} {block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>教务老师列表</h5>
		</div>
		<div class="ibox-content">
			<form class="layui-form" action="" id="seaForm">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" name="seaSn" id="seaSn" placeholder="订单单号/流水单号" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width:100px;">
						<input type="text" name="seaName" id="seaName" placeholder="姓名" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 85px;">
						<select name="seaSource" id="seaSource">
							<option value="" selected>来源</option>
							<option value="0">学费</option>
							<option value="1">报销</option>
							<option value="2">罚款</option>
							<option value="3">退款</option>
							<option value="4">其他</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 85px;">
						<select name="seaStatus" id="seaStatus">
							<option value="" selected>状态</option>
							<option value="0">未支付</option>
							<option value="1">已支付</option>
							<option value="2">已逾期</option>
							<option value="3">已拒绝</option>
							<option value="4">已同意</option>
						</select>
					</div>

					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" class="layui-input" id="seaTime" name="seaTime" placeholder="时间范围">
						</div>
					</div>
					<div class="layui-inline">
						<button type="button" id="search" class="btn btn-info" style="margin-top: 2px;">查询</button>
					</div>

				</div>
			</form>
			<div class="container-fluid">
				<div class="container-fluid">
					{if authCheck('finance/delaccount')}
					<a class="btn btn-danger getIDs" href="javascript:deleteAcc();" data-param=''>删除流水</a>
					{/if}
					{if authCheck('finance/addexpense')}
					<a class="btn btn-primary getIDs" href="javascript:recoveryAcc();" data-param=''>恢复流水</a>
					{/if}
				</div>
			</div>
			<table id="cusTable">
				<thead>
					<th>checkbox</th>
					<th class="text-center" data-field="id" data-sortable="true" data-sort-name="id">ID <i class='fa fa-sort' id="fa-id"></i></th>
					<th class="text-center" data-field="order_sn">订单单号</th>
					<th class="text-center" data-field="account_sn">流水单号</th>
					<th class="text-center" data-field="source_name">来源</th>
					<th class="text-center" data-field="name">学员/报销人</th>
					<th class="text-center" data-field="from">学校专业/部门</th>
					<th class="text-center" data-field="total_amount_name">金额</th>
					<th class="text-center" data-field="agent_name">经办人</th>
					<th class="text-center" data-field="finish_time" data-sortable="true" data-sort-name="finish_time">到期时间 <i class='fa fa-sort' id="fa-finish_time"></i></th>
					<th class="text-center" data-field="status_name">状态</th>
					{if authCheck('finance/receivables')}
					<th class="text-center" data-field="operate">操作</th>
					{/if}
				</thead>
			</table>
		</div>
	</div>
</div>
<div class="remarksBox" style="display:none;padding:15px;"></div>
{/block} {block name="script"}
<script type="text/javascript">
	var IDs = '';

	function initTable() {
		//先销毁表格
		$('#cusTable').bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据
		$("#cusTable").bootstrapTable({
			method: "get", //使用get请求到服务器获取数据
			url: "./account", //获取数据的地址
			striped: true, //表格显示条纹
			pagination: true, //启动分页
			pageSize: 25, //每页显示的记录数
			pageNumber: 1, //当前第几页
			pageList: [25,50,100,150,200,500], //记录数可选列表
			sidePagination: "server", //表示服务端请求
			paginationFirstText: "首页",
			paginationPreText: "上一页",
			paginationNextText: "下一页",
			paginationLastText: "尾页",
			queryParamsType: "undefined",
			silentSort:false,//分页记住排序
			sortName:'id',
			sortOrder:'desc',
			columns: [{
				checkbox: true,
				formatter: function(value, row, index) {
					if (row.state == true) {
						return {
							checked: value, //设置选中
						};
					}
					return value;
				},
			}],
			queryParams: function queryParams(params) { //设置查询参数
				var param = {
					pageNumber: params.pageNumber,
					pageSize: params.pageSize,
					seaSn: $("#seaSn").val(),
					seaName: $("#seaName").val(),
					seaSource: $("#seaSource").val(),
					seaStatus: $("#seaStatus").val(),
					seaTime: $("#seaTime").val(),
					sortName:this.sortName,
					sortOrder:this.sortOrder,
				};
				return param;
			},
			onLoadSuccess: function(res) { //加载成功时执行
				if (111 == res.code) {
					window.location.reload();
				}
				layer.msg("加载成功", {
					time: 1000
				});
			},
			onLoadError: function() { //加载失败时执行
				layer.msg("加载数据失败");
			},
			onDblClickRow: function(row) {
				$(".remarksBox").html(row.remarks);
				var rmBox = layer.open({
					type:1,
					title:"备注信息",
					area:["300px","200px"],
					content:$(".remarksBox")
				});
			},
			onSort:function(name,order){ //切换排序图标
				var idName = 'fa-' + name;
				var oSort = document.getElementById(idName);
				var oFaId = document.getElementById('fa-id');
				var oFaTm = document.getElementById('fa-finish_time');
				oFaId.className = 'fa fa-sort';
				oFaTm.className = 'fa fa-sort';
				order == 'asc'?oSort.className = 'fa fa-sort-up':oSort.className = 'fa fa-sort-down';
			}
		});
	}

	$(function() {
		//调用函数，初始化表格
		initTable();
		layui.use(['form','laydate'], function() {
			var form = layui.form,laydate = layui.laydate;
			laydate.render({elem: '#seaTime',range: true});
		});
		//当点击查询按钮的时候执行
		$("#search").bind("click", initTable);

		$('.getIDs').on('click', function() {
			var checkedOn = $('#cusTable').bootstrapTable('getSelections');
			var IDs = '';
			for (var i = 0; i < checkedOn.length; i++) {
				if (i == 0) {
					IDs = checkedOn[0].id;
				} else {
					IDs += ',' + checkedOn[i].id;
				}
			}
			$('.getIDs').attr('data-param', IDs);
		});
	});

	function deleteAcc(ids = null) {
		if (ids == null) {
			ids = $('.getIDs').attr('data-param');
		}
		if (ids != '') {
			layer.confirm('确认删除这些数据?', {icon: 3,title: '提示'}, function(index) {
				$.post('./AccDelete', {ids: ids}, function(res) {
					if (res.code == 1) {
						layer.alert(res.msg, {title: '友情提示',icon: 1,closeBtn: 0}, initTable);
					} else {
						layer.msg(res.msg, {anim: 6});
					}
				});
			});
		} else {
			layer.msg("请选择数据", {anim: 6});
		}
	}

	function recoveryAcc(ids = null) {
		if (ids == null) {
			ids = $('.getIDs').attr('data-param');
		}
		if (ids != '') {
			layer.confirm('确认恢复这些数据?', {icon: 3,title: '提示'}, function(index) {
				$.post('./AccRecovery', {ids: ids}, function(res) {
					if (res.code == 1) {
						layer.alert(res.msg, {title: '友情提示',icon: 1,closeBtn: 0}, initTable);
					} else {
						layer.msg(res.msg, {anim: 6});
					}
				});
			});
		} else {
			layer.msg("请选择数据", {anim: 6});
		}
	}
</script>
{/block}
